<template>
	<i-form ref="formInline" :model="formInline" :rules="ruleInline" >
		<form-item class="icon_group">
			<h1 style="width:160px;float: left;">账户登录</h1>
			<tooltip content="二维码登录" placement="right-start">
				<icon type="qr-scanner" @click.native="cgQrShow"></icon>
			</tooltip>
		</form-item>
		<form-item prop="user">
			<i-input type="text" v-model="formInline.user" placeholder="Username" clearable>
				<icon type="person" size="20" slot="prepend"></icon>
			</i-input>
		</form-item>
		<form-item prop="password">
			<i-input type="password" v-model="formInline.password" placeholder="Password" clearable>
				<icon type="locked" size="20" slot="prepend"></icon>
			</i-input>
		</form-item>
		<form-item prop="code">
			<img src="" class="codeImg" />
			<i-input type="text" v-model="formInline.code" placeholder="Code" style="width:156px;vertical-align:top;"></i-input>
		</form-item>
		<form-item style="margin-bottom:4px;">
			<a href="" class="loginA">账号注册</a>
			<a href="" class="loginA" style="text-align: right;">忘记密码</a>
		</form-item>
		<form-item>
			<i-button class="loginButton" @click="toJit()">登录</i-button>
		</form-item>
	</i-form>
</template>

<script>
	export default {
		props : [''],
		data() {
			return {
				formItem: {
					username: '',
					password: '',
				},
				formInline: {
					user: '',
					password: ''
				},
				ruleInline: {
					user: [{
						required: true,
						message: 'Please fill in the user name',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: 'Please fill in the password.',
							trigger: 'blur'
						},
						{
							type: 'string',
							min: 6,
							message: 'The password length less than 6 bits',
							trigger: 'blur'
						}
					],
					code: [{
							required: true,
							message: 'Please fill in the code.',
							trigger: 'blur'
						},
						{
							type: 'string',
							min: 4,
							max: 4,
							message: 'code must be 4',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods:{
			cgQrShow(){
				this.$emit('cgQrShow',this);
			}
		}
	}
</script>

<style scoped>
	.ivu-input {
		height: 36px;
	}
	
	.codeImg {
		width: 60px;
		height: 35px;
		margin: 0px;
		display: inline-block;
	}
	
	.loginButton {
		width: 220px;
		height: 38px;
		background-color: rgb(238, 238, 238);
	}
	
	.loginA {
		color: #888;
		width: 108px;
		display: inline-block;
	}
</style>